/<template>
<div class="Classify">
    <van-sidebar v-model="activeKey">
        <van-sidebar-item :title='item.txt' v-for="(item,index) in AllList" :key="index" />
    </van-sidebar>
    <main>
    <van-grid :column-num="2">
        <van-grid-item v-for="(v,i) in AllList[activeKey].children" :key="i" @click="$router.push('/Detail/'+v.id)">
            <img v-lazy="v.src" alt="">
            <p>{{v.txt}}</p>
            <p>￥{{v.price}}元 <span @click.stop='ShopIcon(v)'><van-icon name="cart" color="red" size="20"/></span></p>
        </van-grid-item>
    </van-grid>
    </main>
</div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex';
export default {
    data(){
        return {
            activeKey: 0,
        }
    },
    computed: {
        ...mapState(['AllList']),
        // ...mapMutations(['ShopIcon'])
    },
    mounted() {
        // console.log(AllList);
    },
    methods: {
        ShopIcon(v) {
            this.$store.commit('ShopIcon', v)
        },
    },
}
</script>

<style lang="scss">
.Classify{
    width: 100%;
    height: 100%;
    display: flex;
    .van-sidebar{
        width: 100px;
        height: 100%;
    }
    main{
        width: calc(100% - 100px);
        height: 100%;
        overflow: auto;
    }
}

</style>